<template>
	<div class="content-div">
		<el-row :gutter="10">
			<el-col :span="8">
				<div style="background-color: white; border-radius: 6px;">
					<el-tabs v-model="activeName" @tab-change="handleChangeClick">
						<el-tab-pane label="全部" name="all">
							<el-scrollbar style="height: calc(100vh - 18.1vh);" @scroll="handleAllScroll"
								ref="allScrollbarRef">
								<OrderStatus @orderItemClick='orderItemClick' ref="allOrderRef"></OrderStatus>
							</el-scrollbar>
						</el-tab-pane>
						<el-tab-pane label="已完成" name="complete">
							<el-scrollbar style="height: calc(100vh - 18.1vh);" @scroll="handleCompleteScroll"
								ref="completeScrollbarRef">
								<OrderStatus @orderItemClick='orderItemClick' ref="completeOrderRef"></OrderStatus>
							</el-scrollbar>
						</el-tab-pane>
						<el-tab-pane label="待付款" name="wait">
							<el-scrollbar style="height: calc(100vh - 18.1vh);" @scroll="handleWaitScroll"
								ref="waitScrollbarRef">
								<OrderStatus @orderItemClick='orderItemClick' ref="waitOrderRef"></OrderStatus>
							</el-scrollbar>
						</el-tab-pane>
						<el-tab-pane label="整单退款" name="whole">
							<el-scrollbar style="height: calc(100vh - 18.1vh);" @scroll="handleWholeScroll"
								ref="wholeScrollbarRef">
								<OrderStatus @orderItemClick='orderItemClick' ref="wholeOrderRef"></OrderStatus>
							</el-scrollbar>
						</el-tab-pane>
						<el-tab-pane label="部分退款" name="part">
							<el-scrollbar style="height: calc(100vh - 18.1vh);" @scroll="handlePartScroll"
								ref="partScrollbarRef">
								<OrderStatus @orderItemClick='orderItemClick' ref="partOrderRef"> </OrderStatus>
							</el-scrollbar>
						</el-tab-pane>
					</el-tabs>
				</div>
			</el-col>
			<el-col :span="16">
				<div class="right-div" v-if="isRightHide">
					<OrderMain></OrderMain>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
import OrderMain from '../order/index.vue'
import OrderStatus from '../order/components/order-status.vue'
import { reqGetOrderList } from '../../api/order/index'
import type { TabPaneName } from 'element-plus'
import type { OrderListData, OrderItems, OrderItem } from '../../api/order/type'
import { useRouter } from 'vue-router'
const $router = useRouter()
import useOrderStore from '../../store/modules/order'
let orderStore = useOrderStore()
const isRightHide = ref(false)

const activeName = ref<string>('all')
const tabTitle = reactive([
	{ label: "全部", name: "all" },
	{ label: "已完成", name: "complete" },
	{ label: "待付款", name: "wait" },
	{ label: "整单退款", name: "whole" },
	{ label: "部分退款", name: "part" }
])

const allScrollbarRef = ref()
const completeScrollbarRef = ref()
const waitScrollbarRef = ref()
const wholeScrollbarRef = ref()
const partScrollbarRef = ref()

const allOrderRef = ref()
const completeOrderRef = ref()
const waitOrderRef = ref()
const wholeOrderRef = ref()
const partOrderRef = ref()

const allOrderArray = ref<OrderItems>([])
const completeOrderArray = ref<OrderItems>([])
const waitOrderArray = ref<OrderItems>([])
const wholeOrderArray = ref<OrderItems>([])
const partOrderArray = ref<OrderItems>([])

let page = ref<number>(1)

let num = ref<number>(10)

watch(
	() => orderStore.status,
	() => {
		if (orderStore.status == 1) { // 支付成功刷新页面
			handleChangeClick(activeName.value)
		}
	}
)


/**
 * @Tab切换事件
 */
const handleChangeClick = (tab: TabPaneName) => {
	page.value = 1
	switch (tab) {
		case 'all':
			getHasOrderList()
			break;
		case 'complete':
			getHasOrderList('1')
			break;
		case 'wait':
			getHasOrderList('0')
			break;
		case 'whole':
			getHasOrderList('3')
			break;
		case 'part':
			getHasOrderList('2')
			break;
	}

}

/**
 * @获取订单数据
 */
const getHasOrderList = async (status = 'all', pager = 1) => {
	page.value = pager
	let result: OrderListData = await reqGetOrderList({ page: page.value, num: num.value, code: 'vX7kYhyEVqOcFWJn', status })
	if (result.code == 1) {
		if (result.data.length > 0) {
			switch (status) {
				case 'all':
					if (allOrderRef.value && typeof allOrderRef.value.setOrderArray === 'function') {
						if (page.value == 1) {
							allOrderArray.value = result.data
						} else {
							allOrderArray.value = [...allOrderArray.value, ...result.data]
						}
						allOrderRef.value.setOrderArray(allOrderArray.value)
					}
					break;
				case '1':
					if (completeOrderRef.value && typeof completeOrderRef.value.setOrderArray === 'function') {
						if (page.value == 1) {
							completeOrderArray.value = result.data
						} else {
							completeOrderArray.value = [...completeOrderArray.value, ...result.data]
						}
						completeOrderRef.value.setOrderArray(completeOrderArray.value)
					}
					break;
				case '0':
					if (waitOrderRef.value && typeof waitOrderRef.value.setOrderArray === 'function') {
						if (page.value == 1) {
							waitOrderArray.value = result.data
						} else {
							waitOrderArray.value = [...waitOrderArray.value, ...result.data]
						}
						waitOrderRef.value.setOrderArray(waitOrderArray.value)
					}
					break;
				case '3':
					if (wholeOrderRef.value && typeof wholeOrderRef.value.setOrderArray === 'function') {
						if (page.value == 1) {
							wholeOrderArray.value = result.data
						} else {
							waitOrderArray.value = [...wholeOrderArray.value, ...result.data]
						}
						wholeOrderRef.value.setOrderArray(wholeOrderArray.value)
					}
					break;
				case '2':
					if (partOrderRef.value && typeof partOrderRef.value.setOrderArray === 'function') {
						if (page.value == 1) {
							partOrderArray.value = result.data
						} else {
							partOrderArray.value = [...partOrderArray.value, ...result.data]
						}
						partOrderRef.value.setOrderArray(partOrderArray.value)
					}
					break;
			}
			if (page.value == 1) {
				isRightHide.value = true
			}
			orderItemClick(result.data[0])
		} else {
			if (page.value == 1) {
				isRightHide.value = false
			}else{
				isRightHide.value = true
			}
		}
	}
}

/**
 * @订单条目的点击
 */
const orderItemClick = (item: OrderItem) => {
	switch (item.status) {
		case '0': // 待付款
			$router.push('/order/wait?id=' + item.id)
			break;
		case '1': // 已完成
			$router.push('/order/complete?id=' + item.id)
			break;
		case '2': // 部分退
			$router.push('/order/exit/part?id=' + item.id)
			break;
		case '3': // 整单退
			$router.push('/order/exit/whole?id=' + item.id)
			break;
	}
}

const handleAllScroll = () => {
	const scrollbarContainer = allScrollbarRef.value.wrapRef;
	if (scrollbarContainer) {
		const { scrollTop, clientHeight, scrollHeight } = scrollbarContainer
		if (scrollTop + clientHeight >= scrollHeight) {
			page.value++
			getHasOrderList('all', page.value)
		}
	}
}

const handleCompleteScroll = () => {
	const scrollbarContainer = completeScrollbarRef.value.wrapRef;
	if (scrollbarContainer) {
		const { scrollTop, clientHeight, scrollHeight } = scrollbarContainer
		if (scrollTop + clientHeight >= scrollHeight) {
			page.value++
			getHasOrderList('1', page.value)
		}
	}
}

const handleWaitScroll = () => {
	const scrollbarContainer = waitScrollbarRef.value.wrapRef;
	if (scrollbarContainer) {
		const { scrollTop, clientHeight, scrollHeight } = scrollbarContainer
		if (scrollTop + clientHeight >= scrollHeight) {
			page.value++
			getHasOrderList('0', page.value)
		}
	}
}

const handleWholeScroll = () => {
	const scrollbarContainer = wholeScrollbarRef.value.wrapRef;
	if (scrollbarContainer) {
		const { scrollTop, clientHeight, scrollHeight } = scrollbarContainer
		if (scrollTop + clientHeight >= scrollHeight) {
			page.value++
			getHasOrderList('3', page.value)
		}
	}
}

const handlePartScroll = () => {
	const scrollbarContainer = partScrollbarRef.value.wrapRef;
	if (scrollbarContainer) {
		const { scrollTop, clientHeight, scrollHeight } = scrollbarContainer
		if (scrollTop + clientHeight >= scrollHeight) {
			page.value++
			getHasOrderList('2', page.value)
		}
	}
}



onMounted(() => {
	getHasOrderList()
})
</script>

<style lang="scss" scoped>
.content-div {
	height: 100%;
}
</style>

<style>
.el-tabs__item {
	height: 58px;
	margin-left: 1.5vw;
	padding: 0vw 0.2vw 0vw 0vw;
}

.el-tabs__active-bar {
	height: 3.5px;
	border-radius: 3px;
	color: #2F51FF;
}

.el-tabs__active-bar {
	background-color: #2F51FF;
}

.el-tabs__item {
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 1vw;
	color: #333;
}

.el-tabs__item:hover {
	color: #2F51FF;
}

.el-tabs__item.is-active {
	color: #2F51FF;
}
</style>